<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Bajlam System</title>
            </f:facet>
        </h:head>

        <h:body>

            <p:layout fullPage="true">
   
                <p:layoutUnit position="north" size="150" resizable="true" closable="true" collapsible="true" >
<img src="../Cabeza.png" width="100%" height="37" alt="Cabeza"/>
                 <center><H1>Bajlam System</H1> </center>
       

                </p:layoutUnit>

                <p:layoutUnit position="south" size="100" closable="true" collapsible="true">
                    <center><FONT FACE="raro, courier" COLOR="red">
 UMG,Sololá</FONT></center>
                    <img src="../pie.jpg" width="100%" height="37" alt="Cabeza"/>
                </p:layoutUnit>

                <p:layoutUnit position="west" size="175" header="Ocultar" collapsible="true">
                    <p:menu>
                        <p:submenu label="Modulos">
                            <p:menuitem value="Ventas" outcome="index" />
                            <p:menuitem value="Productos" outcome="Productos" />
                        </p:submenu>

                    </p:menu>
                </p:layoutUnit>

                <p:layoutUnit position="center" style="background-color:#FFFFFF;">
                    <p:commandButton value="Añadir Cliente" onclick="PF('dlg').show();" type="button" />
 <p:dialog header="Clientes" widgetVar="dlg" minimizable="true" maximizable="true">
 

                   <h:form>
                          <p:panel header="Ingreso Cliente" style="width:320px">
                            <h:panelGrid columns="2" cellpadding="5">
                               <h:outputLabel for="id" value="Codigo" />
                               <p:inputText value="#{client.codigo}" id="codigo" required="true" style="width:85%"/>
                              <h:outputLabel for="nom" value="Nombre" />
                              <p:inputText value="#{client.nombre}" id="nom" required="true" style="width:85%"/>
                              <h:outputLabel for="ape" value="Apellido" />
                              <p:inputText value="#{client.apellido}" id="ape" required="true" style="width:85%"/>
                              <h:outputLabel for="direc" value="Dirección" />
                              <p:inputText value="#{client.direccion}" id="dir" required="true" style="width:85%"/>
                              <h:outputLabel for="tel" value="Teléfono" />
                              <p:inputText value="#{client.telefono}" id="tel" required="true" style="width:85%"/>
                              <h:outputLabel for="email" value="E-mail" />
                              <p:inputText value="#{client.correo}" id="email" required="true" style="width:85%"/>
                              <h:outputLabel for="estado" value="Estado" />
                              <p:inputText value="#{client.estado}" id="estado" required="true" style="width:85%"/>
                              
                                 <p:growl id="messages" />
                                
                                 <p:commandButton ajax="false" action="#{client.addAction()}" value="Guardar" />
                            
                          </h:panelGrid>
                        </p:panel>
                   </h:form>  
                         
   
            <!-- Inicia la tabla Data Table Basic -->              
 
</p:dialog>
                    <!-- fin del dialogo (Formulario de ingreso de clientes)-->
                    
   <h:panelGrid columns="1" cellpadding="10">
                         <h:form>
                            <h:panelGrid columns="4" cellpadding="5">
                                <h:outputLabel for="name" value="ID" style="font-weight:bold" />
                                <p:inputText id="name" value="" />
                                <p:commandButton value="Buscar" update="display" icon="ui-icon-check" />
                                <h:outputText id="display" value="" />
                            </h:panelGrid>
                         </h:form>
  </h:panelGrid>
        <!-- inicio tabla  -->                            
             <h:form id="form1">
            <p:growl id="messages" showDetail="true"/>
           

                <p:spacer height="30px;"/>
                <p:dataTable value="#{client.orderList}" var="cli"  widgetVar="50" style="width: 100%;"  editable="true" scrollable="true" scrollHeight="170">
                    <f:facet name="header">  
                        Lista De Clientes  
                    </f:facet>
                    <p:ajax event="rowEdit" listener="#{client.onEdit}" update=":form1:messages" />  
                    <p:ajax event="rowEditCancel" listener="#{client.onCancel}" update=":form1:messages" /> 
                    <p:column>
                        <f:facet name="header">  
                            <h:outputText value="Codigo" />  
                        </f:facet>
                        <p:cellEditor>  
                            <f:facet name="output">  
                                <h:outputText value="#{cli.codigo}" />  
                            </f:facet>  
                            <f:facet name="input">  
                                <p:inputText value="#{cli.codigo}" style="width:100%"/>  
                            </f:facet>  
                        </p:cellEditor> 
                    </p:column>

                    <p:column>
                        <f:facet name="header">  
                            <h:outputText value="Nombre" />  
                        </f:facet>
                        <p:cellEditor>  
                            <f:facet name="output">  
                                <h:outputText value="#{cli.nombre}" />  
                            </f:facet>  
                            <f:facet name="input">  
                                <p:inputText value="#{cli.nombre}" style="width:100%"/>  
                            </f:facet>  
                        </p:cellEditor>
                    </p:column>

                    <p:column>
                        <f:facet name="header">  
                            <h:outputText value="Dirección" />  
                        </f:facet>
                        <p:cellEditor>  
                            <f:facet name="output">  
                                <h:outputText value="#{cli.direccion}" />  
                            </f:facet>  
                            <f:facet name="input">  
                                <p:inputText value="#{cli.direccion}" style="width:100%"/>  
                            </f:facet>  
                        </p:cellEditor>
                    </p:column>   
                    
                    <p:column>
                        <f:facet name="header">  
                            <h:outputText value="Teléfono" />  
                        </f:facet>
                        <p:cellEditor>  
                            <f:facet name="output">  
                                <h:outputText value="#{cli.telefono}" />  
                            </f:facet>  
                            <f:facet name="input">  
                                <p:inputText value="#{cli.telefono}" style="width:100%"/>  
                            </f:facet>  
                        </p:cellEditor>
                    </p:column>   
                    
                   <p:column>
                        <f:facet name="header">  
                            <h:outputText value="Email" />  
                        </f:facet>
                        <p:cellEditor>  
                            <f:facet name="output">  
                                <h:outputText value="#{cli.correo}" />  
                            </f:facet>  
                            <f:facet name="input">  
                                <p:inputText value="#{cli.correo}" style="width:100%"/>  
                            </f:facet>  
                        </p:cellEditor>
                    </p:column>   
                    
                    <p:column headerText="Options" style="width:50px">  
                        <p:rowEditor />  
                    </p:column> 
                </p:dataTable>
          
        </h:form>
      <!-- inicio tabla  -->      
        
        

                </p:layoutUnit>

            </p:layout>

        </h:body>

    </f:view>
</html>


